import * as echarts from 'echarts'
import config from '@/utils/chartConfig'

export default {
  data () {
    return {
      timeId: {},
      animate: false
    }
  },
  mounted () {
    this.animate = true
  },
  beforeDestroy () {
    for (let t in this.timeId) {
      clearInterval(this.timeId[t])
    }
  },
  methods: {
    // 设置饼状图
    setPieChart (obj, name) {
      if (obj.data.length == 0) {
        document.getElementById(name).innerHTML = '<div class="font-color no-data">暂无数据</div>'
        return false
      }
      const chartConfig = this.$tools.deepClone(config.pieChart)
      chartConfig.series[0].data = obj.data // 数据
      // chartConfig.label.formatter = obj.formatter || '{b}'
      chartConfig.label.formatter = '{b}({d}%)' || '{b}'
      chartConfig.tooltip.formatter = obj.tooltipFormatter || '{b} <br/>值:{c} 百分比:{d}%'
      var myChart = echarts.init(document.getElementById(name))
      myChart.clear()
      myChart.setOption(chartConfig)
    }, // 设置柱状图
    setCategoryChart (obj, name, isTrue = false) {
      if (obj.data && !this.$refs.inductionNum) {
        const isTrue = obj.data.some(item => item > 0)
        if (!isTrue) {
          document.getElementById(name).innerHTML = '<div class="font-color no-data">暂无数据</div>'
          return false
        }
      }
      const arr = obj.data.sort((a, b) => b - a)
      const chartConfig = this.$tools.deepClone(config.categoryChart)
      chartConfig.xAxis.data = obj.xdata // x轴数据
      chartConfig.series[0].data = obj.data // y数据
      chartConfig.yAxis.max = arr[0] // y数据最大值
      chartConfig.series[0].itemStyle.color = obj.color // 颜色
      chartConfig.xAxis.axisLabel.color = obj.color // x轴字体颜色
      chartConfig.yAxis.axisLabel.color = obj.color // y轴字体颜色
      // chartConfig.series[0].label.color = obj.color // 顶端文本颜色
      var myChart = echarts.init(document.getElementById(name))
      myChart.clear()
      myChart.setOption(chartConfig)
      if (isTrue) {
        if (this.timeId[name]) clearInterval(this.timeId[name])
        this.timeId[name] = setInterval(() => {
          if (chartConfig.dataZoom[0].endValue == obj.xdata.length - 1) {
            chartConfig.dataZoom[0].endValue = 6
            chartConfig.dataZoom[0].startValue = 0
          } else {
            chartConfig.dataZoom[0].endValue = chartConfig.dataZoom[0].endValue + 1
            chartConfig.dataZoom[0].startValue = chartConfig.dataZoom[0].startValue + 1
          }
          myChart.setOption(chartConfig)
        }, 2000)
      } else {
        if (this.timeId[name]) clearInterval(this.timeId[name])
      }
    }, // 设置折线图
    setLineChart (obj, name) {
      if (obj.ydata) {
        const isTrue = obj.ydata.some(item => item > 0)
        if (!isTrue) {
          document.getElementById(name).innerHTML = '<div class="font-color no-data">暂无数据</div>'
          return false
        }
      }
      const lineChartConfig = this.$tools.deepClone(config.lineChart)
      lineChartConfig.xAxis.data = obj.xdata // x轴数据
      lineChartConfig.xAxis.axisLine.lineStyle = obj.lineStyle // x轴颜色
      lineChartConfig.series[0].data = obj.ydata // y轴数据
      lineChartConfig.yAxis.axisLabel.color = obj.lineStyle.color// y轴字体颜色
      lineChartConfig.series[0].lineStyle = obj.lineStyle // 折线颜色
      // lineChartConfig.series[0].label.color = obj.lineStyle.color // 顶端文本颜色
      // lineChartConfig.series[0].areaStyle.normal = {
      //   // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
      //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //     offset: 0,
      //     color: obj.graphicColor[0]
      //   }, {
      //     offset: 0.5,
      //     color: obj.graphicColor[1]
      //   }, {
      //     offset: 1,
      //     color: obj.graphicColor[2]
      //   }])
      // }
      var myChart = echarts.init(document.getElementById(name))
      myChart.clear()
      myChart.setOption(lineChartConfig)
    },
    getData (params, fn, loading = true) {
      this.$api.getPlatForm(params, loading).then(({ data }) => {
        if (data) fn(data)
      })
    }, // 智慧校园接口数据
    getSchoolData (params, fn, loading = true) {
      this.$api.schoolPlatForm(params, loading).then(({ data }) => {
        if (data) fn(data)
      })
    }, // 下载数量
    getUserData (params, fn, loading = true) {
      this.$api.schoolUserCount(params, loading).then(({ data }) => {
        if (data) fn(data)
      })
    }, // 详情
    getUserInfo (params, fn, loading = true) {
      this.$api.schoolPlatFormInfo(params, loading).then(({ data }) => {
        if (data) fn(data)
      })
    }, // 折线图
    getUserSevenDay (params, fn, loading = true) {
      this.$api.schoolPlatFormSevenDay(params, loading).then(({ data }) => {
        if (data) fn(data)
      })
    },
  }
}
